import "./index.css";
import classNames from "classnames";
const bg = true;
const blue = false;
const element = (
    <div>
        {/* 类名写法: class 和 className, 推荐用className */}
        <div className="blue">blue</div>
        <div className="red">red</div>
        {/* <div className={`blue  ${bg ? "bg" : ""}`}>red bg</div> */}
        {/* <div className={classNames("blue", "bg")}>classNames</div> */}
        <div className={classNames({ blue: true, bg: false })}>classNames</div>
        <div className={classNames({ blue: blue, bg: bg })}>classNames</div>
        {/* style 生成的是内联样式
            外层代表插值表达式括号
            内层代表对象
            属性用驼峰
            默认单位为px
            写百分比、vw、vh要用字符串
             */}
        <div style={{ color: "yellowGreen", fontSize: 30, width: "50%" }}>
            文本
        </div>
    </div>
);
export default element; // jsx
